<template>
  <div class="front">
    <el-form :model="searchForm" label-width="120px">
      <el-form-item class="input" label="客户名字">
        <el-input v-model="searchForm.clientName" />
      </el-form-item>
    </el-form>
    <el-button class="search" type="primary" @click="onSearch">查询</el-button>
  </div>


  <div class="tail">
    <div class="tail-action">
      <el-button type="primary" @click="openAdd">新增客户</el-button>
    </div>
    <el-table :data="tableData()" border style="width: 100%">
      <el-table-column type="selection" width="40" />
      <el-table-column prop="clientCode" label="客户编码" min-width="60" />
      <el-table-column prop="clientName" label="客户名称" min-width="60" />
      <el-table-column prop="clientType" label="客户类型" min-width="60" />
      <el-table-column prop="lendName" label="出借名义" min-width="60" />
      <el-table-column prop="transactorName" label="经办人" min-width="60" />
      <el-table-column prop="transactorPhone" label="经办人手机号" min-width="80" />
      <el-table-column prop="transactorIdcard" label="经办人身份证号" min-width="100" />
      <el-table-column prop="settlementType" label="结算方式" min-width="60" />
      <el-table-column prop="isLimited" label="是否设置借贷额度" min-width="60" />
      <el-table-column prop="lendMoneyLimit" label="借贷额度" min-width="60" />
      <el-table-column prop="createTime" label="创建时间" min-width="60" />
      <el-table-column prop="remark" label="备注" min-width="60" />
      <el-table-column fixed="right" label="操作" min-width="60">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleOpenEdit(scope.row)">编辑</el-button>
          <el-button link type="primary" size="small" @click="handleDeleteRole(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination v-model:current-page="data.page" v-model:page-size="data.limit"
        layout="prev, pager, next ,total,sizes" :total="data.total" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" />
    </div>
  </div>

  <div class="dialog-list">
    <el-dialog v-model="dialogVisible1" title="新建客户" width="35%" :close-on-click-modal="true" :show-close="false">
      <div>
        <el-form :model="clientForm" label-width="120px" :rules="clientRules" ref="clientRef">
          <el-form-item label="客户编码" :required="true">
            <el-input v-model="clientForm.clientCode" disabled />
          </el-form-item>
          <el-form-item label="客户名称" prop="clientName" :required="true">
            <el-input v-model="clientForm.clientName" />
          </el-form-item>
          <el-form-item label="客户类型" prop="clientType" :required="true">
            <el-select v-model="clientForm.clientType" placeholder="请选择客户类型">
              <el-option label="个人客户" value="个人客户" />
              <el-option label="企业客户" value="企业客户" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
          <el-form-item label="借货名义" prop="lendName" :required="true">
            <el-select v-model="clientForm.lendName" placeholder="请选择借货名义">
              <el-option label="个人客户名义" value="个人客户名义" />
              <el-option label="企业客户名义" value="企业客户名义" />
              <el-option label="其他名义" value="其他名义" />
            </el-select>
          </el-form-item>
          <el-form-item label="经办人姓名" prop="transactorName" :required="true">
            <el-input v-model="clientForm.transactorName" />
          </el-form-item>
          <el-form-item label="经办人身份证号码">
            <el-input v-model="clientForm.transactorIdcard" />
          </el-form-item>
          <el-form-item label="经办人手机号" :prop="transactorPhone" :required="true">
            <el-input v-model="clientForm.transactorPhone" />
          </el-form-item>
          <el-form-item label="结算方式" :required="true">
            <el-select v-model="clientForm.settlementType" placeholder="请选择结算方式">
              <el-option label="销售价百分比" value="销售价百分比" />
              <el-option label="成本价百分比" value="成本价百分比" />
              <el-option label="标签价百分比" value="标签价百分比" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否设置借贷额度" :required="true">
            <el-switch v-model="clientForm.isLimited" size="large" active-color="#13ce66" inactive-color="#ff4949"
              active-value="0" inactive-value="1" active-text="是" />
          </el-form-item>
          <el-form-item label="借贷额度" :required="true">
            <el-input v-model="clientForm.lendMoneyLimit" :disabled="clientForm.isLimited == 1" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="clientForm.remark" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="handleAddClient">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible2" title="编辑客户" width="30%" :before-close="handleClose" :show-close="false">
      <div>
        <el-form :model="clientForm" label-width="120px" :rules="clientRules" ref="clientRef">
          <el-form-item label="客户名称" prop="clientName" :required="true">
            <el-input v-model="clientForm.clientName" />
          </el-form-item>
          <el-form-item label="客户类型" prop="clientType" :required="true">
            <el-select v-model="clientForm.clientType" placeholder="请选择客户类型">
              <el-option label="个人客户" value="个人客户" />
              <el-option label="企业客户" value="企业客户" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
          <el-form-item label="借货名义" prop="lendName" :required="true">
            <el-select v-model="clientForm.lendName" placeholder="请选择借货名义">
              <el-option label="个人客户名义" value="个人客户名义" />
              <el-option label="企业客户名义" value="企业客户名义" />
              <el-option label="其他名义" value="其他名义" />
            </el-select>
          </el-form-item>
          <el-form-item label="经办人姓名" prop="transactorName" :required="true">
            <el-input v-model="clientForm.transactorName" />
          </el-form-item>
          <el-form-item label="经办人身份证号码">
            <el-input v-model="clientForm.transactorIdcard" />
          </el-form-item>
          <el-form-item label="经办人手机号" :prop="transactorPhone" :required="true">
            <el-input v-model="clientForm.transactorPhone" />
          </el-form-item>
          <el-form-item label="结算方式" :required="true">
            <el-select v-model="clientForm.settleWay" placeholder="请选择结算方式">
              <el-option label="销售价百分比" value="0" />
              <el-option label="成本价百分比" value="1" />
              <el-option label="标签价百分比" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否设置借贷额度" :required="true">
            <el-switch v-model="clientForm.isLimited" size="large" active-color="#13ce66" inactive-color="#ff4949"
              active-value="0" inactive-value="1" active-text="是" />
          </el-form-item>
          <el-form-item label="借贷额度" :required="true">
            <el-input v-model="clientForm.lendMoneyLimit" :disabled="clientForm.isLimited == 1" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="clientForm.remark" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="handleUpdateClient">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>
     
<script >
import { ref, defineComponent, reactive, toRefs, } from "vue";
import { ElMessageBox, ElMessage } from 'element-plus'
import { onMounted } from "vue";
import { getClientList, addClient, deleteClient, updateClient, getClientCode } from '@/api/user/user'

export default defineComponent({
  name: "UserRole",
  components: {},

  setup() {
    let clientData = reactive({
      data: [],
    });
    const clientType = ref(true)
    const clientForm = reactive({
      id:'',
      clientName: '',
      clientCode: '',
      remark: '',
      status: 0,
      clientType: '',
      lendName: '',
      transactorIdcard: '',
      transactorPhone: '',
      isLimited: '0',
      transactorName: '',
      contactPerson: '',
      lendMoneyLimit: "",
      settlementType: '',
      deptId: '1',
    });
    const searchForm = reactive({
      clientName: '',

    });
    let dialogVisible1 = ref(false)
    const dialogVisible2 = ref(false)
    const clientRef=ref(null)
    const clientRules = reactive({
      clientName: [{ required: true, message: '请输入内容', trigger: 'blur' },
      { min: 2, max: 8, message: '用户名 在 2 到 8长度之间', trigger: 'blur' }],
      clientType: [{ required: true, message: '该选项不能为空', trigger: 'blur' }],
      lendName: [{ required: true, message: '该选项不能为空', trigger: 'blur' }],
      transactorName: [{ required: true, message: '请输入内容', trigger: 'blur' },
      { min: 2, max: 8, message: '用户名 在 2 到 8长度之间', trigger: 'blur' }],
      transactorPhone: [{ required: true, message: '请输入内容', trigger: 'blur' }, {
        type: 'number',
        message: '手机号格式不正确',
        trigger: 'blur',
        transform(value) {
          var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
          if (!phonereg.test(value)) {
            return false
          } else {
            return Number(value)
          }
        }
      }]
    });


    //表格用到的参数
    let state = reactive({
      data: {
        page: 1,
        limit: 10,
        total: clientData.data.length,
      }
    });

    const filterTag = (value, row) => {
      return row.status == value
    }
    onMounted(() => {
      handleGetClientList(state.data.page, state.data.limit)
    })


    const handleGetClientList = (page, limit) => {
      getClientList(page, limit).then((res) => {
        clientData.data = res.rows
        state.data.total = res.total
      })
    }
    const tableData = () => {
      return clientData.data
    };
    //改变页码
    const handleCurrentChange = (e) => {
      state.page = e;
      handleGetClientList(e, state.data.limit)
    };
    //改变页数限制
    const handleSizeChange = (e) => {
      state.limit = e;
      handleGetClientList(state.data.page, e)
    };

    const openAdd = () => {
      dialogVisible1.value = true
      getClientCode().then((res) => {
        clientForm.clientCode = res
      })
    }
    //添加客户
    const handleAddClient = () => {
      clientRef.value.validate().then(() => {//验证通过
        ElMessageBox.confirm('确认提交?')
          .then(() => {
            addClient(clientForm).then(() => {
              dialogVisible1.value = false
              handleGetClientList(state.data.page, state.data.limit)
            })
          })
          .catch(() => {
            // catch error
          })
      }).catch(()=>{
        
      })
    }

    const handleDeleteRole = (clientId) => { //删除仓位
      ElMessageBox.confirm(
        '是否要删除该用户?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          deleteClient(clientId).then(() => {
            handleGetClientList(state.data.page, state.data.limit)
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
          })
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作',
          })
        })
    }

    const handleOpenEdit = (data) => { //打开编辑仓位
      dialogVisible2.value = true
      clientForm.id=data.id
      clientForm.clientName = data.clientName
      clientForm.clientCode=data.clientCode
      clientForm.contactPerson=data.contactPerson
      clientForm.transactorPhone=data.transactorPhone
      clientForm.transactorName=data.transactorName
      clientForm.transactorIdcard=data.transactorIdcard
      clientForm.isLimited=data.isLimited
      clientForm.remark = data.remark
    }

    const handleUpdateClient = () => {  //编辑仓位
      clientRef.value.validate().then(() => {//验证通过
        ElMessageBox.confirm('确认提交?')
          .then(() => {
            updateClient(clientForm).then(() => {
              dialogVisible2.value = false
              handleGetClientList(state.data.page, state.data.limit)
            })
          })
          .catch(() => {
            // catch error
          })
      }).catch(()=>{
        
      })
    }
    const handleClose = (e) => { //提交表单
      ElMessageBox.confirm('确认提交?')
        .then(() => {
          done()
        })
        .catch(() => {
          // catch error
        })
    }
    const onSearch=()=>{
      getClientList(state.data.page, state.data.limit, searchForm.clientName).then((res) => {
        clientData.value = res.rows
        state.data.total = res.total
      })
    }
    return {
      clientData, clientType,clientRef,
      dialogVisible1,
      dialogVisible2,
      searchForm,
      clientForm,
      clientRules,
      tableData, filterTag,
      handleCurrentChange,
      handleSizeChange,
      handleClose, openAdd,
      handleDeleteRole, handleAddClient, handleGetClientList, handleUpdateClient,
      handleOpenEdit,onSearch,
      ...toRefs(state),
    };
  },
});
</script>
    
<style rel="stylesheet/scss" lang="scss" scoped>
.front {
  background-color: #fff;
  padding: 10px;
  display: flex;

  .input {
    float: left;
  }

  .search {
    margin-left: 50px;
  }
}

.center {
  margin: 10px;
}

.form-add-checkbox {
  width: 200px;
  height: 260px;
  display: block;
  border: solid 1px #c9c9c9;

  .form-add-checkbox-item {
    width: 180px;
    margin: auto;
  }
}

.tail {
  background-color: #fff;
  margin-top: 40px;
  padding: 10px;

  .tail-action {
    margin-bottom: 10px;
    display: flex;
  }
}
</style>